<template>
  <div class="component">
    <div class="empty"></div>
    <div class="tabbar">
    <van-tabbar v-model="activeIndex" @change="change">
      <van-tabbar-item icon="wap-home">
        <span>首页</span>
      </van-tabbar-item>
        <van-tabbar-item icon="wap-nav">
        <span>书架</span>
      </van-tabbar-item>
      <!-- <van-tabbar-item icon="wap-nav" badge="3">
        <span>书架</span>
      </van-tabbar-item> -->
      <van-tabbar-item icon="manager">我的</van-tabbar-item>
    </van-tabbar>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
const activeIndex = ref(0);
const list = [
  {
    path: "/index",
    name: "首页",
  },
  {
    path: "/cart",
    name: "书架",
  },
  {
    path: "/my",
    name: "我的",
  },
];
// 接受父组件传递的参数
const props = defineProps({
  currentIndex: {
    type: Number,
    default: 0,
  },
});
const router = useRouter();
const change = (v) => {
  console.log("change", v);
  router.push(list[v].path);
};
onMounted(() => {
  activeIndex.value = props.currentIndex;
});
</script>
<style scoped lang="less">
.empty{
  height: 50px;
}
.tabbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999;
}
</style>
